import classNames from 'classnames';
import React from 'react';
import styles from './index.module.scss';

interface IInputProps
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  errorMsg?: string;
  extra?: React.ReactNode;
}

export default function Input({
  errorMsg,
  extra,
  className,
  ...restProps
}: IInputProps) {
  return (
    <div className={styles.root}>
      <div className="input-box">
        <input {...restProps} className={classNames('input', className)} />
        <div className="validate">{errorMsg}</div>
        <div className="extra">{extra}</div>
      </div>
    </div>
  );
}
